import React from 'react';
import { connect } from 'react-redux';
import Pagination from 'rc-pagination';
import operateChannelLogAction from '../../actions/operateChannelLogAction.js';
import Widget from '../mui/Widget.js';
import SearchInput from '../mui/searchInput.js';

const ChannelLog = React.createClass({
  getInitialState() {
    return {
      pageList: []
    };
  },
  componentDidMount() {
    const data = {
      keyword: '',
      page: 1,
      page_size: 30
    };
    const { fetchChannelLogList } = this.props;
    fetchChannelLogList(data);
  },
  componentWillReceiveProps(nextProps) {
    this.setState({ pageList: nextProps.LogData.data });
  },
  search(target) {
    this.searchValue = target.value;
    const data = {
      keyword: target.value,
      page_size: 30
    };
    const { fetchChannelLogList } = this.props;
    fetchChannelLogList(data);
  },
  pagination(pageNumber) {
    const data = {
      page: pageNumber,
      keyword: this.searchValue,
      page_size: 30
    };
    const { fetchChannelLogList } = this.props;
    fetchChannelLogList(data);
  },
  render() {
    const { pageList } = this.state;
    const pages = this.props.LogData.pages * 10 || 0;
    const { LogData } = this.props;
    return (
      <div>
        <Widget widgetHeader={' 渠道发布记录'} />
        <div className="widget-body">
          <div className="mw400">
            <div className="pull-right">
              <SearchInput placeholder={"渠道名、渠道编号"} onSearch={this.search} />
            </div>
            <div className="clearfix"></div>
          </div>
          <table className="table table-hover">
            <thead>
              <tr>
                <th className="mw280">发布时间</th>
                <th className="mw190">渠道编号</th>
                <th className="mw270">渠道名称</th>
                <th className="mw320">操作帐号</th>
              </tr>
            </thead>
            <tbody>
            {
              pageList.map((item, index) =>
                <tr key={index}>
                  <td>{item.created}</td>
                  <td>{item.channel_no}</td>
                  <td>{item.channel_name}</td>
                  <td>{item.username}</td>
                </tr>
              )
            }
            </tbody>
          </table>
          <div className="mt50 mb100">
            <Pagination className="ant-pagination" current={LogData.page} defaultCurrent={1} total={pages} onChange={this.pagination} />
          </div>
        </div>
      </div>
    );
  }
});

const mapStateToProps = function (state) {
  return {
    LogData: state.operateLog.logDataList,
  };
};
// export default TestPackage
module.exports = connect(mapStateToProps, operateChannelLogAction)(ChannelLog);
